<template>
  <div class="container-width app-container">
    <div class="select-warp">
      <!-- <classSelect ref="vedio" @select="vedioSelect" :sorts="lessonMode"></classSelect> -->
      <courseSelect class="select"  @select="courseTypeSelect" :sorts="courseTypes"></courseSelect>
    </div>
    <el-row type="flex" style="flex-wrap: wrap">
      <el-col
        :span="5"
        :offset="index % 4 ? 1 : 0"
        v-for="(item, index) in courses"
        :key="`class_${index}`"
        style="margin-bottom: 20px;"
      >
        <courseItem :courseItem="item"></courseItem>
      </el-col>
    </el-row>
    <el-empty v-if="courses.length<=0" ></el-empty>
    <el-pagination
      class="pagination"
      @current-change="getList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination> 
  </div>
</template>

<script lang="ts">
import courseItem from "/@/components/courseItem/index.vue";
import courseSelect from "./courseSelect.vue";
import {courseList} from "/@/api/course/index";
// //import {mapGetters} from "vuex"

// import {useOptionsStore} from "/@/store/index";
// const optionsStore = useOptionsStore();
//const self = this;
//let courseTypes = [];

export default {
  components: {
    courseItem,
    courseSelect,
  },
  computed(){
    //courseTypes = optionsStore.getCourseTypes();
    //...mapGetters(['lessonSorts','lessonMode'])
  },
  mounted(){
    // optionsStore.getCourseTypes().then((res) =>{
    //   this.courseTypes = res;
    //   //console.log(res);
    // });
    this.getList();
  },
  data() {
    return {
      courses: [ ],
      total:0,
      pageSize:50,
      courseTypes:[ ],
    };
  },
  methods:{
   courseTypeSelect(id){
     this.getList(1,{courseType:id})
   },
    getList(page = 1, params = {}){

      let offset = (page - 1) * this.pageSize;
      courseList({ // 调起api
        offset: offset,
        size: this.pageSize,
        ...params,
      })
        .then((res) => {
          const {courseInfos,total} = res;
          this.courses = courseInfos
          this.total = total
        })
        .catch((err) => {console.error(err)});
    }
  }
};
</script>

<style lang="scss" scoped>


</style>